<!DOCTYPE html>
<html>
<head>
    <title>高德地图示例</title>
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
    <style>
        #map { height: 400px; width: 100%; }
        form { margin: 20px; }
    </style>
    <script src="https://webapi.amap.com/maps?v=1.4.15&key=32d4388f3404c40fd139a6d3f2702f2c"></script>
    <script>
        var map;
        var marker;

        function initMap() {
            map = new AMap.Map('map', {
                center: [116.397428, 39.90923], // 初始中心点
                zoom: 12
            });

            // 初始化标记
            marker = new AMap.Marker({
                position: [116.397428, 39.90923],
                map: map
            });

            marker.setLabel({
                offset: new AMap.Pixel(0, 30), // 设置文本标签的位置
                content: '北京'
            });
        }

        function updateMap() {
            var lat = parseFloat(document.getElementById('latitude').value);
            var lng = parseFloat(document.getElementById('longitude').value);
            if (!isNaN(lat) && !isNaN(lng)) {
                var newLatLng = [lng, lat];
                map.setCenter(newLatLng);
                marker.setPosition(newLatLng);
                marker.setLabel({
                    offset: new AMap.Pixel(0, 30),
                    content: '更新位置'
                });
            } else {
                alert('请输入有效的经纬度');
            }
        }

        window.onload = initMap;
    </script>
</head>
<body>
    <form id="mapForm">
        <label for="latitude">纬度:</label>
        <input type="text" id="latitude" name="latitude" placeholder="例如：39.90923">
        <label for="longitude">经度:</label>
        <input type="text" id="longitude" name="longitude" placeholder="例如：116.397428">
        <button type="button" onclick="updateMap()">更新地图</button>
    </form>
    <div id="map"></div>
</body>
</html>
